import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
import {
  Users, Truck, Zap, Cpu, ShieldCheck, Boxes, Briefcase, ClipboardList,
  Plus, Minus, Camera, Image as ImageIcon, ScanLine, X, ChevronRight, ChevronLeft,
  ChevronDown, Phone, MapPin, CalendarDays, Settings as SettingsIcon, Search,
  Package, Wrench, AlertTriangle, Check, CloudOff, RefreshCw, Star, History,
  Globe, LogOut, Building2, User as UserIcon, Trash2, ArrowRightLeft, Info,
  FileText, ClipboardCheck, Layers
} from "lucide-react";

/* ============================================================================
   DESIGN TOKENS
   A tool-crib / site-panel aesthetic: steel-gray field, near-black ink,
   safety-yellow primary action, three distinct action colors (taken / returned
   / repair), and a dark "gauge readout" treatment for stock numbers —
   evoking the digital counter on a crib scale rather than a generic app.
   ============================================================================ */
const TOKENS = {
  bg: "#E4E7E9",
  bgPanel: "#FFFFFF",
  ink: "#14181C",
  inkSoft: "#4B5560",
  line: "#C6CCD1",
  lineStrong: "#14181C",
  yellow: "#FFC02E",
  yellowInk: "#14181C",
  blue: "#2A5EDB",
  blueSoft: "#E8EEFC",
  taken: "#C13B2C",
  takenSoft: "#FBE7E3",
  returned: "#1E8A57",
  returnedSoft: "#E4F5EC",
  repair: "#D9820B",
  repairSoft: "#FCEEDA",
  gaugeBg: "#171B1E",
  gaugeText: "#7CF29C",
  danger: "#C13B2C",
  radius: "10px",
  radiusSm: "6px",
};

const FONT_IMPORT = `@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@600;700&display=swap');`;

/* ============================================================================
   TRANSLATIONS
   ============================================================================ */
const TRANSLATIONS = {
  he: {
    dir: "rtl",
    appName: "מלאי אתר",
    login_title: "כניסה למערכת",
    login_username: "שם משתמש",
    login_role: "תפקיד",
    login_project: "בחירת פרויקט",
    login_selectProject: "בחר פרויקט…",
    login_addProject: "הוספת פרויקט חדש",
    login_language: "שפה",
    login_enter: "כניסה",
    login_needFields: "יש למלא שם משתמש, תפקיד ולבחור פרויקט",
    addProject_title: "פרויקט חדש",
    addProject_name: "שם האתר / פרויקט",
    addProject_address: "כתובת ומיקום",
    addProject_contact: "אחראי לוגיסטי",
    addProject_phone: "טלפון ליצירת קשר",
    save: "שמירה",
    cancel: "ביטול",
    siteDetails_title: "פרטי אתר",
    menu_calendar: "לוח שנה",
    menu_summary: "סיכום מלאי",
    menu_settings: "הגדרות",
    menu_addCategory: "הוספת קטגוריה",
    addCategory_title: "קטגוריה חדשה",
    addCategory_name: "שם הקטגוריה",
    addCategory_icon: "בחר סמל",
    category_addItem: "הוספת ציוד",
    category_empty: "אין עדיין פריטים בקטגוריה הזו. הוסיפו את הראשון.",
    addItem_title: "ציוד חדש",
    addItem_name: "שם הפריט / הכלי",
    addItem_threshold: "סף התראת מלאי נמוך (לא חובה)",
    item_found: "מלאי נמצא",
    item_ordered: "מוזמן",
    item_framework: "מסגרת",
    item_order: "הוזמן",
    item_frameworkOrder: "הזמנת מסגרת +",
    item_taken: "נלקח",
    item_returned: "הוחזר",
    item_repair: "נשלח לתיקון",
    item_received: "התקבלה סחורה",
    item_inRepair: "בתיקון",
    item_returnFromRepair: "חזר מתיקון",
    item_lowStock: "מלאי נמוך",
    item_history: "היסטוריית פעולות",
    item_noHistory: "אין עדיין פעולות מתועדות לפריט זה.",
    item_favorite: "מועדף",
    order_title: "פרטי הזמנה",
    order_frameworkTitle: "הזמנה ממלאי מסגרת",
    order_date: "תאריך ההזמנה",
    order_number: "מספר דרישה / הזמנה",
    order_supplier: "שם הספק",
    order_supplierPhone: "טלפון הספק",
    order_eta: "תאריך אספקה משוער",
    order_qty: "כמות",
    order_notEnoughFramework: "אין מספיק במלאי המסגרת",
    doc_title_taken: "תיעוד: נלקח",
    doc_title_returned: "תיעוד: הוחזר",
    doc_title_repair: "תיעוד: נשלח לתיקון",
    doc_title_repairReturn: "תיעוד: חזר מתיקון",
    doc_title_received: "תיעוד: קבלת סחורה",
    doc_qty: "כמות",
    doc_date: "תאריך ושעה",
    doc_reporter: "שם המדווח",
    doc_photo: "צילום תמונה (חובה)",
    doc_photo_camera: "צלם תמונה",
    doc_photo_gallery: "בחר מהגלריה",
    doc_photo_retake: "החלף תמונה",
    doc_barcode: "סריקת ברקוד (לא חובה)",
    doc_barcode_placeholder: "הזן / סרוק קוד",
    doc_note: "הערה חופשית (לא חובה)",
    doc_confirm: "אישור ועדכון מלאי",
    doc_photoRequired: "יש לצלם או לבחור תמונה לפני האישור",
    calendar_title: "לוח שנה",
    calendar_noActivity: "אין פעולות מתועדות בתאריך זה",
    summary_title: "סיכום מלאי",
    summary_chooseCategories: "בחר קטגוריות להצגה",
    summary_noItems: "אין פריטים להצגה",
    settings_title: "הגדרות",
    settings_language: "שפת תצוגה",
    settings_site: "אתר נוכחי",
    settings_user: "משתמש מחובר",
    settings_logout: "החלפת משתמש / אתר",
    settings_addLanguageNote: "ניתן להוסיף שפות נוספות (למשל הינדית ותאית) בהתאם לצוות",
    sync_synced: "מסונכרן",
    sync_syncing: "מסנכרן…",
    sync_offline: "אופליין — יסתנכרן כשהחיבור יחזור",
    back: "חזרה",
    search_placeholder: "חיפוש כלי…",
    delete: "מחיקה",
    confirmDelete: "למחוק פריט זה?",
    yes: "כן",
    no: "לא",
    all: "הכל",
    close: "סגירה",
    type_taken: "נלקח",
    type_returned: "הוחזר",
    type_repair: "תיקון",
    type_repairReturn: "חזר מתיקון",
    type_received: "התקבל",
    type_order: "הוזמן",
    type_frameworkOrder: "הזמנת מסגרת",
    noProjectsYet: "עדיין אין פרויקטים — הוסיפו אחד כדי להתחיל",
    required: "שדה חובה",
    units: "יח'",
  },
  en: {
    dir: "ltr",
    appName: "Site Inventory",
    login_title: "Sign in",
    login_username: "Username",
    login_role: "Role",
    login_project: "Select project",
    login_selectProject: "Choose a project…",
    login_addProject: "Add new project",
    login_language: "Language",
    login_enter: "Enter",
    login_needFields: "Please fill in username, role and select a project",
    addProject_title: "New project",
    addProject_name: "Site / project name",
    addProject_address: "Address & location",
    addProject_contact: "Logistics contact",
    addProject_phone: "Contact phone",
    save: "Save",
    cancel: "Cancel",
    siteDetails_title: "Site details",
    menu_calendar: "Calendar",
    menu_summary: "Inventory summary",
    menu_settings: "Settings",
    menu_addCategory: "Add category",
    addCategory_title: "New category",
    addCategory_name: "Category name",
    addCategory_icon: "Choose an icon",
    category_addItem: "Add equipment",
    category_empty: "No items in this category yet. Add the first one.",
    addItem_title: "New equipment",
    addItem_name: "Item / tool name",
    addItem_threshold: "Low-stock alert threshold (optional)",
    item_found: "On site",
    item_ordered: "Ordered",
    item_framework: "Framework",
    item_order: "Order",
    item_frameworkOrder: "Framework order +",
    item_taken: "Taken",
    item_returned: "Returned",
    item_repair: "Sent for repair",
    item_received: "Goods received",
    item_inRepair: "In repair",
    item_returnFromRepair: "Returned from repair",
    item_lowStock: "Low stock",
    item_history: "Activity history",
    item_noHistory: "No activity logged for this item yet.",
    item_favorite: "Favorite",
    order_title: "Order details",
    order_frameworkTitle: "Order from framework stock",
    order_date: "Order date",
    order_number: "Requisition / order number",
    order_supplier: "Supplier name",
    order_supplierPhone: "Supplier phone",
    order_eta: "Expected delivery date",
    order_qty: "Quantity",
    order_notEnoughFramework: "Not enough framework stock",
    doc_title_taken: "Log: Taken",
    doc_title_returned: "Log: Returned",
    doc_title_repair: "Log: Sent for repair",
    doc_title_repairReturn: "Log: Returned from repair",
    doc_title_received: "Log: Goods received",
    doc_qty: "Quantity",
    doc_date: "Date & time",
    doc_reporter: "Reported by",
    doc_photo: "Photo (required)",
    doc_photo_camera: "Take photo",
    doc_photo_gallery: "Choose from gallery",
    doc_photo_retake: "Replace photo",
    doc_barcode: "Barcode scan (optional)",
    doc_barcode_placeholder: "Enter / scan code",
    doc_note: "Note (optional)",
    doc_confirm: "Confirm & update stock",
    doc_photoRequired: "Take or choose a photo before confirming",
    calendar_title: "Calendar",
    calendar_noActivity: "No activity logged for this date",
    summary_title: "Inventory summary",
    summary_chooseCategories: "Choose categories to show",
    summary_noItems: "No items to show",
    settings_title: "Settings",
    settings_language: "Display language",
    settings_site: "Current site",
    settings_user: "Signed in as",
    settings_logout: "Switch user / site",
    settings_addLanguageNote: "More languages (e.g. Hindi, Thai) can be added for your crew",
    sync_synced: "Synced",
    sync_syncing: "Syncing…",
    sync_offline: "Offline — will sync when back online",
    back: "Back",
    search_placeholder: "Search tools…",
    delete: "Delete",
    confirmDelete: "Delete this item?",
    yes: "Yes",
    no: "No",
    all: "All",
    close: "Close",
    type_taken: "Taken",
    type_returned: "Returned",
    type_repair: "Repair",
    type_repairReturn: "Returned from repair",
    type_received: "Received",
    type_order: "Ordered",
    type_frameworkOrder: "Framework order",
    noProjectsYet: "No projects yet — add one to get started",
    required: "Required",
    units: "u.",
  },
};

const DEFAULT_CATEGORIES = [
  { id: "dailyWorkers", nameKey: "cat_dailyWorkers", name: { he: "עובדים יומיים", en: "Daily workers" }, icon: "Users" },
  { id: "heavyEquipment", name: { he: "כלי צמ\"ה", en: "Heavy equipment" }, icon: "Truck" },
  { id: "powerTools", name: { he: "כלים חשמליים", en: "Power tools" }, icon: "Zap" },
  { id: "technicalEquipment", name: { he: "ציוד טכני", en: "Technical equipment" }, icon: "Cpu" },
  { id: "safetyProducts", name: { he: "מוצרי בטיחות", en: "Safety products" }, icon: "ShieldCheck" },
  { id: "buildingMaterials", name: { he: "חומרי בניה", en: "Building materials" }, icon: "Boxes" },
  { id: "officeEquipment", name: { he: "ציוד משרדי", en: "Office equipment" }, icon: "Briefcase" },
  { id: "frameworkOrders", name: { he: "הזמנות מסגרת", en: "Framework orders" }, icon: "ClipboardList" },
];

const ICON_MAP = {
  Users, Truck, Zap, Cpu, ShieldCheck, Boxes, Briefcase, ClipboardList,
  Package, Wrench, Layers, FileText, ClipboardCheck,
};
const ICON_CHOICES = Object.keys(ICON_MAP);

/* ============================================================================
   STORAGE HELPERS
   All operational data (projects/categories/items/history) is shared=true so
   every phone pointed at this app sees the same live data. The signed-in
   user's own profile (name/role/last project/language) is stored personally
   (shared=false) so it is remembered between visits for that account.

   NOTE ON OFFLINE MODE: this environment does not allow browser storage
   (localStorage/sessionStorage/IndexedDB) inside artifacts, and window.storage
   itself is a network call. So true "written to disk, survives a closed tab
   while offline" behaviour isn't available here. What this app does instead:
   every change is applied to the screen immediately (optimistic UI) and a
   background queue keeps retrying the network save every few seconds until
   it succeeds — so a flaky connection or a few seconds of dead zone won't
   lose anything, and the status pill tells you when you're not yet synced.
   A fully offline-durable version of this app would need a native/PWA shell
   with real local storage, which is outside what a web artifact can do.
   ============================================================================ */
async function storageGet(key, shared = true) {
  try {
    const res = await window.storage.get(key, shared);
    return res && res.value != null ? JSON.parse(res.value) : null;
  } catch (e) {
    return null;
  }
}
async function storageSetRaw(key, value, shared = true) {
  const res = await window.storage.set(key, JSON.stringify(value), shared);
  if (!res) throw new Error("storage set failed");
  return res;
}

function uid() {
  return Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
}

/* ============================================================================
   IMAGE COMPRESSION
   ============================================================================ */
function compressImage(file, maxSize = 360, quality = 0.55) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => {
      const img = new window.Image();
      img.onload = () => {
        let { width, height } = img;
        if (width > height && width > maxSize) {
          height = Math.round((height * maxSize) / width);
          width = maxSize;
        } else if (height > maxSize) {
          width = Math.round((width * maxSize) / height);
          height = maxSize;
        }
        const canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        resolve(canvas.toDataURL("image/jpeg", quality));
      };
      img.onerror = reject;
      img.src = e.target.result;
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

/* ============================================================================
   SYNC ENGINE — a tiny context-free hook used at the App root
   ============================================================================ */
function useSyncEngine() {
  const [status, setStatus] = useState("synced"); // synced | syncing | offline
  const queueRef = useRef([]); // [{key, value, shared}]
  const flushingRef = useRef(false);

  const flush = useCallback(async () => {
    if (flushingRef.current || queueRef.current.length === 0) return;
    flushingRef.current = true;
    setStatus("syncing");
    while (queueRef.current.length > 0) {
      const job = queueRef.current[0];
      try {
        await storageSetRaw(job.key, job.value, job.shared);
        queueRef.current.shift();
      } catch (e) {
        setStatus("offline");
        flushingRef.current = false;
        return;
      }
    }
    flushingRef.current = false;
    setStatus("synced");
  }, []);

  useEffect(() => {
    const id = setInterval(flush, 4000);
    return () => clearInterval(id);
  }, [flush]);

  const persist = useCallback(
    async (key, value, shared = true) => {
      // de-dupe: replace any queued job for the same key
      queueRef.current = queueRef.current.filter((j) => j.key !== key);
      queueRef.current.push({ key, value, shared });
      flush();
    },
    [flush]
  );

  return { status, persist };
}

/* ============================================================================
   SMALL SHARED UI PRIMITIVES
   ============================================================================ */
function IconBtn({ onClick, children, style, title }) {
  return (
    <button
      onClick={onClick}
      title={title}
      style={{
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        width: 40, height: 40, borderRadius: TOKENS.radiusSm, border: `2px solid ${TOKENS.lineStrong}`,
        background: TOKENS.bgPanel, cursor: "pointer", ...style,
      }}
    >
      {children}
    </button>
  );
}

function BigButton({ onClick, children, bg, color = "#fff", style }) {
  return (
    <button
      onClick={onClick}
      style={{
        display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
        width: "100%", padding: "16px 14px", borderRadius: TOKENS.radius,
        border: `2px solid ${TOKENS.lineStrong}`, background: bg, color,
        fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700,
        fontSize: 20, letterSpacing: 0.3, cursor: "pointer",
        boxShadow: "0 3px 0 rgba(20,24,28,0.9)", ...style,
      }}
      onMouseDown={(e) => (e.currentTarget.style.transform = "translateY(2px)")}
      onMouseUp={(e) => (e.currentTarget.style.transform = "translateY(0px)")}
    >
      {children}
    </button>
  );
}

function Field({ label, children, required }) {
  return (
    <label style={{ display: "block", marginBottom: 14 }}>
      <div style={{ fontSize: 13, fontWeight: 600, color: TOKENS.inkSoft, marginBottom: 6 }}>
        {label} {required && <span style={{ color: TOKENS.taken }}>*</span>}
      </div>
      {children}
    </label>
  );
}

const inputStyle = {
  width: "100%", boxSizing: "border-box", padding: "12px 12px", fontSize: 16,
  border: `2px solid ${TOKENS.line}`, borderRadius: TOKENS.radiusSm,
  fontFamily: "'Barlow', sans-serif", background: "#fff", color: TOKENS.ink,
};

function Modal({ title, onClose, children, wide }) {
  return (
    <div
      style={{
        position: "fixed", inset: 0, background: "rgba(20,24,28,0.55)", zIndex: 200,
        display: "flex", alignItems: "flex-end", justifyContent: "center",
      }}
      onClick={onClose}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        style={{
          background: TOKENS.bgPanel, width: "100%", maxWidth: wide ? 560 : 480,
          borderRadius: "16px 16px 0 0", maxHeight: "92vh", overflowY: "auto",
          padding: "18px 18px 24px", boxShadow: "0 -6px 30px rgba(0,0,0,0.3)",
          border: `2px solid ${TOKENS.lineStrong}`, borderBottom: "none",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
          <h2 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: 26, margin: 0 }}>
            {title}
          </h2>
          <IconBtn onClick={onClose}><X size={20} /></IconBtn>
        </div>
        {children}
      </div>
    </div>
  );
}

function Stepper({ value, onChange, min = 0 }) {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <IconBtn onClick={() => onChange(Math.max(min, value - 1))}><Minus size={18} /></IconBtn>
      <div
        style={{
          minWidth: 64, textAlign: "center", fontFamily: "'JetBrains Mono', monospace",
          fontWeight: 700, fontSize: 22, background: TOKENS.gaugeBg, color: TOKENS.gaugeText,
          borderRadius: TOKENS.radiusSm, padding: "8px 6px",
        }}
      >
        {value}
      </div>
      <IconBtn onClick={() => onChange(value + 1)}><Plus size={18} /></IconBtn>
    </div>
  );
}

function SyncPill({ status, t }) {
  const map = {
    synced: { icon: <Check size={14} />, label: t.sync_synced, bg: TOKENS.returnedSoft, color: TOKENS.returned },
    syncing: { icon: <RefreshCw size={14} className="spin" />, label: t.sync_syncing, bg: TOKENS.blueSoft, color: TOKENS.blue },
    offline: { icon: <CloudOff size={14} />, label: t.sync_offline, bg: TOKENS.repairSoft, color: TOKENS.repair },
  };
  const s = map[status];
  return (
    <div
      style={{
        display: "inline-flex", alignItems: "center", gap: 6, padding: "5px 10px",
        borderRadius: 999, background: s.bg, color: s.color, fontSize: 12, fontWeight: 700,
        whiteSpace: "nowrap",
      }}
    >
      {s.icon}
      {s.label}
    </div>
  );
}

/* ============================================================================
   PHOTO CAPTURE WIDGET
   ============================================================================ */
function PhotoCapture({ photo, setPhoto, t }) {
  const camRef = useRef(null);
  const galRef = useRef(null);
  const handle = async (e) => {
    const file = e.target.files && e.target.files[0];
    if (!file) return;
    const dataUrl = await compressImage(file);
    setPhoto(dataUrl);
    e.target.value = "";
  };
  return (
    <div>
      {photo ? (
        <div style={{ position: "relative", marginBottom: 10 }}>
          <img src={photo} alt="" style={{ width: "100%", maxHeight: 220, objectFit: "cover", borderRadius: TOKENS.radiusSm, border: `2px solid ${TOKENS.lineStrong}` }} />
        </div>
      ) : null}
      <div style={{ display: "flex", gap: 10 }}>
        <button onClick={() => camRef.current.click()} style={{ ...ghostBtnStyle, flex: 1 }}>
          <Camera size={18} /> {photo ? t.doc_photo_retake : t.doc_photo_camera}
        </button>
        <button onClick={() => galRef.current.click()} style={{ ...ghostBtnStyle, flex: 1 }}>
          <ImageIcon size={18} /> {t.doc_photo_gallery}
        </button>
      </div>
      <input ref={camRef} type="file" accept="image/*" capture="environment" style={{ display: "none" }} onChange={handle} />
      <input ref={galRef} type="file" accept="image/*" style={{ display: "none" }} onChange={handle} />
    </div>
  );
}

const ghostBtnStyle = {
  display: "flex", alignItems: "center", justifyContent: "center", gap: 8,
  padding: "12px 10px", borderRadius: TOKENS.radiusSm, border: `2px solid ${TOKENS.lineStrong}`,
  background: "#fff", fontWeight: 600, fontFamily: "'Barlow', sans-serif", fontSize: 14, cursor: "pointer",
};

/* ============================================================================
   ROOT APP
   ============================================================================ */
export default function App() {
  const [lang, setLang] = useState("he");
  const t = TRANSLATIONS[lang];
  const { status: syncStatus, persist } = useSyncEngine();

  const [booted, setBooted] = useState(false);
  const [profile, setProfile] = useState(null); // {username, role, projectId}
  const [projects, setProjects] = useState([]);
  const [categories, setCategories] = useState([]);
  const [screen, setScreen] = useState("login"); // login|menu|category|item|calendar|summary|settings
  const [activeCategory, setActiveCategory] = useState(null);
  const [activeItemId, setActiveItemId] = useState(null);
  const [items, setItems] = useState([]); // items of active category
  const [showAddProject, setShowAddProject] = useState(false);
  const [showSiteDetails, setShowSiteDetails] = useState(false);
  const [showAddCategory, setShowAddCategory] = useState(false);
  const [showAddItem, setShowAddItem] = useState(false);

  // ---- boot: load profile + projects
  useEffect(() => {
    (async () => {
      const [p, pr] = await Promise.all([
        storageGet("profile", false),
        storageGet("projects", true),
      ]);
      setProjects(pr || []);
      if (p) {
        setProfile(p);
        setLang(p.language || "he");
        setScreen("menu");
      }
      setBooted(true);
    })();
  }, []);

  // ---- load categories whenever project changes / screen enters menu
  const loadCategories = useCallback(async (projectId) => {
    if (!projectId) return;
    const c = await storageGet(`categories:${projectId}`, true);
    if (c && c.length) {
      setCategories(c);
    } else {
      setCategories(DEFAULT_CATEGORIES);
      persist(`categories:${projectId}`, DEFAULT_CATEGORIES, true);
    }
  }, [persist]);

  useEffect(() => {
    if (profile?.projectId) loadCategories(profile.projectId);
  }, [profile?.projectId, loadCategories]);

  // ---- load items whenever active category changes
  const loadItems = useCallback(async (projectId, categoryId) => {
    if (!projectId || !categoryId) return;
    const it = await storageGet(`items:${projectId}:${categoryId}`, true);
    setItems(it || []);
  }, []);

  useEffect(() => {
    if (profile?.projectId && activeCategory) loadItems(profile.projectId, activeCategory.id);
  }, [profile?.projectId, activeCategory, loadItems]);

  const saveItems = useCallback(
    (newItems) => {
      setItems(newItems);
      if (profile?.projectId && activeCategory) {
        persist(`items:${profile.projectId}:${activeCategory.id}`, newItems, true);
      }
    },
    [profile, activeCategory, persist]
  );

  const saveCategories = useCallback(
    (newCats) => {
      setCategories(newCats);
      if (profile?.projectId) persist(`categories:${profile.projectId}`, newCats, true);
    },
    [profile, persist]
  );

  const saveProjects = useCallback(
    (newProjects) => {
      setProjects(newProjects);
      persist("projects", newProjects, true);
    },
    [persist]
  );

  const appendActivity = useCallback(
    async (entry) => {
      if (!profile?.projectId) return;
      const key = `activity:${profile.projectId}`;
      const existing = (await storageGet(key, true)) || [];
      const updated = [{ id: uid(), ...entry }, ...existing].slice(0, 300);
      persist(key, updated, true);
    },
    [profile, persist]
  );

  const appendHistory = useCallback(
    async (itemId, entry) => {
      if (!profile?.projectId) return;
      const key = `history:${profile.projectId}:${itemId}`;
      const existing = (await storageGet(key, true)) || [];
      const updated = [{ id: uid(), ...entry }, ...existing].slice(0, 40);
      persist(key, updated, true);
      return updated;
    },
    [profile, persist]
  );

  const handleLogin = (p) => {
    const full = { ...p, language: lang };
    setProfile(full);
    persist("profile", full, false);
    setScreen("menu");
  };

  const handleLogout = () => {
    setProfile(null);
    setScreen("login");
    setActiveCategory(null);
    setActiveItemId(null);
  };

  const setLanguage = (l) => {
    setLang(l);
    if (profile) {
      const updated = { ...profile, language: l };
      setProfile(updated);
      persist("profile", updated, false);
    }
  };

  const currentProject = projects.find((p) => p.id === profile?.projectId) || null;
  const activeItem = items.find((i) => i.id === activeItemId) || null;

  const dir = t.dir;

  return (
    <div
      dir={dir}
      style={{
        minHeight: "100%", background: TOKENS.bg, color: TOKENS.ink,
        fontFamily: "'Barlow', sans-serif", direction: dir,
      }}
    >
      <style>{`
        ${FONT_IMPORT}
        * { box-sizing: border-box; }
        button { font-family: inherit; }
        .spin { animation: spin 1s linear infinite; }
        @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
        input:focus, select:focus, textarea:focus { outline: 3px solid ${TOKENS.yellow}; outline-offset: 1px; }
        button:focus-visible { outline: 3px solid ${TOKENS.yellow}; outline-offset: 1px; }
        ::-webkit-scrollbar { width: 0; height: 0; }
      `}</style>

      {!booted ? (
        <div style={{ padding: 40, textAlign: "center", color: TOKENS.inkSoft }}>…</div>
      ) : screen === "login" ? (
        <LoginScreen
          t={t}
          lang={lang}
          setLang={setLanguage}
          projects={projects}
          onLogin={handleLogin}
          onAddProject={() => setShowAddProject(true)}
        />
      ) : (
        <div style={{ maxWidth: 480, margin: "0 auto", minHeight: "100vh", background: TOKENS.bg, paddingBottom: 30 }}>
          <TopBar
            t={t}
            syncStatus={syncStatus}
            project={currentProject}
            screen={screen}
            onBack={() => {
              if (screen === "item") setScreen("category");
              else if (screen === "category") setScreen("menu");
              else setScreen("menu");
            }}
            onOpenSiteDetails={() => setShowSiteDetails(true)}
            dir={dir}
          />

          {screen === "menu" && (
            <MainMenu
              t={t}
              lang={lang}
              categories={categories}
              onOpenCategory={(c) => { setActiveCategory(c); setScreen("category"); }}
              onAddCategory={() => setShowAddCategory(true)}
              onCalendar={() => setScreen("calendar")}
              onSummary={() => setScreen("summary")}
              onSettings={() => setScreen("settings")}
            />
          )}

          {screen === "category" && activeCategory && (
            <CategoryScreen
              t={t}
              lang={lang}
              category={activeCategory}
              items={items}
              onOpenItem={(it) => { setActiveItemId(it.id); setScreen("item"); }}
              onAddItem={() => setShowAddItem(true)}
            />
          )}

          {screen === "item" && activeItem && (
            <ItemScreen
              t={t}
              lang={lang}
              item={activeItem}
              profile={profile}
              onUpdateItem={(updated) => saveItems(items.map((i) => (i.id === updated.id ? updated : i)))}
              onDeleteItem={() => { saveItems(items.filter((i) => i.id !== activeItem.id)); setScreen("category"); }}
              appendHistory={appendHistory}
              appendActivity={(entry) => appendActivity({ ...entry, itemName: activeItem.name, categoryName: activeCategory.name[lang] })}
              storageGet={storageGet}
            />
          )}

          {screen === "calendar" && (
            <CalendarScreen t={t} lang={lang} profile={profile} storageGet={storageGet} />
          )}

          {screen === "summary" && (
            <SummaryScreen t={t} lang={lang} categories={categories} profile={profile} storageGet={storageGet} />
          )}

          {screen === "settings" && (
            <SettingsScreen
              t={t}
              lang={lang}
              setLang={setLanguage}
              profile={profile}
              project={currentProject}
              onLogout={handleLogout}
            />
          )}
        </div>
      )}

      {showAddProject && (
        <AddProjectModal
          t={t}
          onClose={() => setShowAddProject(false)}
          onSave={(proj) => {
            const np = { id: uid(), ...proj };
            saveProjects([...projects, np]);
            setShowAddProject(false);
          }}
        />
      )}

      {showSiteDetails && currentProject && (
        <SiteDetailsModal t={t} project={currentProject} onClose={() => setShowSiteDetails(false)} />
      )}

      {showAddCategory && (
        <AddCategoryModal
          t={t}
          lang={lang}
          onClose={() => setShowAddCategory(false)}
          onSave={(cat) => {
            saveCategories([...categories, { id: uid(), name: { he: cat.name, en: cat.name }, icon: cat.icon }]);
            setShowAddCategory(false);
          }}
        />
      )}

      {showAddItem && (
        <AddItemModal
          t={t}
          onClose={() => setShowAddItem(false)}
          onSave={(item) => {
            saveItems([
              ...items,
              {
                id: uid(),
                name: item.name,
                favorite: false,
                lowStockThreshold: item.threshold || 0,
                stock: { framework: 0, ordered: 0, found: 0, repair: 0 },
              },
            ]);
            setShowAddItem(false);
          }}
        />
      )}
    </div>
  );
}

/* ============================================================================
   TOP BAR
   ============================================================================ */
function TopBar({ t, syncStatus, project, screen, onBack, onOpenSiteDetails, dir }) {
  const BackIcon = dir === "rtl" ? ChevronRight : ChevronLeft;
  return (
    <div
      style={{
        position: "sticky", top: 0, zIndex: 50, background: TOKENS.ink, color: "#fff",
        padding: "12px 14px", display: "flex", alignItems: "center", gap: 10,
        borderBottom: `3px solid ${TOKENS.yellow}`,
      }}
    >
      {screen !== "menu" ? (
        <IconBtn onClick={onBack} style={{ background: "transparent", border: `2px solid #fff`, color: "#fff" }}>
          <BackIcon size={20} />
        </IconBtn>
      ) : (
        <div style={{ width: 40 }} />
      )}
      <button
        onClick={onOpenSiteDetails}
        style={{
          flex: 1, background: "transparent", border: "none", color: "#fff", textAlign: "start",
          cursor: "pointer", padding: 0,
        }}
      >
        <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: 22, lineHeight: 1 }}>
          {project ? project.name : t.appName}
        </div>
        {project && (
          <div style={{ fontSize: 11, opacity: 0.75, display: "flex", alignItems: "center", gap: 4, marginTop: 3 }}>
            <MapPin size={11} /> {project.address || "—"}
          </div>
        )}
      </button>
      <SyncPill status={syncStatus} t={t} />
    </div>
  );
}

/* ============================================================================
   LOGIN
   ============================================================================ */
function LoginScreen({ t, lang, setLang, projects, onLogin, onAddProject }) {
  const [username, setUsername] = useState("");
  const [role, setRole] = useState("");
  const [projectId, setProjectId] = useState("");
  const [error, setError] = useState("");

  const submit = () => {
    if (!username.trim() || !role.trim() || !projectId) {
      setError(t.login_needFields);
      return;
    }
    onLogin({ username: username.trim(), role: role.trim(), projectId });
  };

  return (
    <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", padding: 20 }}>
      <div
        style={{
          width: "100%", maxWidth: 420, background: TOKENS.bgPanel, borderRadius: 16,
          border: `2px solid ${TOKENS.lineStrong}`, boxShadow: "0 4px 0 rgba(20,24,28,0.9)",
          padding: 24,
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 4 }}>
          <div style={{ background: TOKENS.yellow, borderRadius: 8, padding: 8, border: `2px solid ${TOKENS.lineStrong}` }}>
            <Building2 size={22} />
          </div>
          <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: 26 }}>{t.appName}</div>
        </div>
        <h1 style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 18, color: TOKENS.inkSoft, marginTop: 10, marginBottom: 20 }}>
          {t.login_title}
        </h1>

        <Field label={t.login_username} required>
          <input style={inputStyle} value={username} onChange={(e) => setUsername(e.target.value)} placeholder="" />
        </Field>

        <Field label={t.login_role} required>
          <input style={inputStyle} value={role} onChange={(e) => setRole(e.target.value)} placeholder="" />
        </Field>

        <Field label={t.login_project} required>
          <select style={inputStyle} value={projectId} onChange={(e) => setProjectId(e.target.value)}>
            <option value="">{t.login_selectProject}</option>
            {projects.map((p) => (
              <option key={p.id} value={p.id}>{p.name}</option>
            ))}
          </select>
        </Field>

        <button
          onClick={onAddProject}
          style={{ ...ghostBtnStyle, width: "100%", marginBottom: 18, justifyContent: "center" }}
        >
          <Plus size={16} /> {t.login_addProject}
        </button>

        <Field label={t.login_language}>
          <div style={{ display: "flex", gap: 8 }}>
            {["he", "en"].map((l) => (
              <button
                key={l}
                onClick={() => setLang(l)}
                style={{
                  flex: 1, padding: "10px 8px", borderRadius: TOKENS.radiusSm,
                  border: `2px solid ${TOKENS.lineStrong}`,
                  background: lang === l ? TOKENS.yellow : "#fff",
                  fontWeight: 700, cursor: "pointer",
                }}
              >
                {l === "he" ? "עברית" : "English"}
              </button>
            ))}
          </div>
        </Field>

        {error && (
          <div style={{ color: TOKENS.taken, fontSize: 13, fontWeight: 600, marginBottom: 12 }}>{error}</div>
        )}
        {projects.length === 0 && (
          <div style={{ color: TOKENS.inkSoft, fontSize: 13, marginBottom: 12 }}>{t.noProjectsYet}</div>
        )}

        <BigButton onClick={submit} bg={TOKENS.yellow} color={TOKENS.yellowInk}>
          {t.login_enter}
        </BigButton>
      </div>
    </div>
  );
}

/* ============================================================================
   ADD PROJECT MODAL
   ============================================================================ */
function AddProjectModal({ t, onClose, onSave }) {
  const [name, setName] = useState("");
  const [address, setAddress] = useState("");
  const [contact, setContact] = useState("");
  const [phone, setPhone] = useState("");
  return (
    <Modal title={t.addProject_title} onClose={onClose}>
      <Field label={t.addProject_name} required>
        <input style={inputStyle} value={name} onChange={(e) => setName(e.target.value)} />
      </Field>
      <Field label={t.addProject_address}>
        <input style={inputStyle} value={address} onChange={(e) => setAddress(e.target.value)} />
      </Field>
      <Field label={t.addProject_contact}>
        <input style={inputStyle} value={contact} onChange={(e) => setContact(e.target.value)} />
      </Field>
      <Field label={t.addProject_phone}>
        <input style={inputStyle} value={phone} onChange={(e) => setPhone(e.target.value)} type="tel" />
      </Field>
      <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
        <BigButton onClick={onClose} bg="#fff" color={TOKENS.ink} style={{ boxShadow: "none" }}>{t.cancel}</BigButton>
        <BigButton
          onClick={() => name.trim() && onSave({ name: name.trim(), address, contact, phone })}
          bg={TOKENS.yellow} color={TOKENS.yellowInk}
        >
          {t.save}
        </BigButton>
      </div>
    </Modal>
  );
}

/* ============================================================================
   SITE DETAILS MODAL
   ============================================================================ */
function SiteDetailsModal({ t, project, onClose }) {
  return (
    <Modal title={t.siteDetails_title} onClose={onClose}>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: 24 }}>{project.name}</div>
        <Row icon={<MapPin size={18} />} label={project.address || "—"} />
        <Row icon={<UserIcon size={18} />} label={project.contact || "—"} />
        {project.phone ? (
          <a href={`tel:${project.phone}`} style={{ textDecoration: "none" }}>
            <Row icon={<Phone size={18} />} label={project.phone} accent />
          </a>
        ) : (
          <Row icon={<Phone size={18} />} label="—" />
        )}
      </div>
    </Modal>
  );
}
function Row({ icon, label, accent }) {
  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 10, padding: "10px 12px",
      background: accent ? TOKENS.blueSoft : "#F5F6F7", borderRadius: TOKENS.radiusSm,
      color: accent ? TOKENS.blue : TOKENS.ink, fontWeight: 600,
    }}>
      {icon}<span>{label}</span>
    </div>
  );
}

/* ============================================================================
   MAIN MENU
   ============================================================================ */
function MainMenu({ t, lang, categories, onOpenCategory, onAddCategory, onCalendar, onSummary, onSettings }) {
  return (
    <div style={{ padding: 14 }}>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 16 }}>
        {categories.map((c) => {
          const Icon = ICON_MAP[c.icon] || Package;
          return (
            <button
              key={c.id}
              onClick={() => onOpenCategory(c)}
              style={{
                display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
                gap: 8, padding: "20px 8px", borderRadius: TOKENS.radius, border: `2px solid ${TOKENS.lineStrong}`,
                background: "#fff", cursor: "pointer", boxShadow: "0 3px 0 rgba(20,24,28,0.9)",
                minHeight: 110,
              }}
            >
              <div style={{ background: TOKENS.yellow, borderRadius: 10, padding: 10, border: `2px solid ${TOKENS.lineStrong}` }}>
                <Icon size={26} color={TOKENS.ink} />
              </div>
              <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 16, textAlign: "center", lineHeight: 1.15 }}>
                {c.name[lang] || c.name.he}
              </div>
            </button>
          );
        })}
        <button
          onClick={onAddCategory}
          style={{
            display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
            gap: 8, padding: "20px 8px", borderRadius: TOKENS.radius, border: `2px dashed ${TOKENS.inkSoft}`,
            background: "transparent", cursor: "pointer", minHeight: 110, color: TOKENS.inkSoft,
          }}
        >
          <Plus size={26} />
          <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 15 }}>{t.menu_addCategory}</div>
        </button>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
        <MenuLink icon={<CalendarDays size={20} />} label={t.menu_calendar} onClick={onCalendar} />
        <MenuLink icon={<ClipboardCheck size={20} />} label={t.menu_summary} onClick={onSummary} />
        <MenuLink icon={<SettingsIcon size={20} />} label={t.menu_settings} onClick={onSettings} />
      </div>
    </div>
  );
}
function MenuLink({ icon, label, onClick }) {
  return (
    <button
      onClick={onClick}
      style={{
        display: "flex", alignItems: "center", gap: 12, padding: "14px 16px",
        borderRadius: TOKENS.radiusSm, border: `2px solid ${TOKENS.lineStrong}`, background: "#fff",
        cursor: "pointer", fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 700, fontSize: 18,
      }}
    >
      {icon}{label}
    </button>
  );
}

/* ============================================================================
   ADD CATEGORY MODAL
   ============================================================================ */
function AddCategoryModal({ t, onClose, onSave }) {
  const [name, setName] = useState("");
  const [icon, setIcon] = useState("Package");
  return (
    <Modal title={t.addCategory_title} onClose={onClose}>
      <Field label={t.addCategory_name} required>
        <input style={inputStyle} value={name} onChange={(e) => setName(e.target.value)} />
      </Field>
      <Field label={t.addCategory_icon}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 8 }}>
          {ICON_CHOICES.map((k) => {
            const Icon = ICON_MAP[k];
            return (
              <button
                key={k}
                onClick={() => setIcon(k)}
                style={{
                  padding: 10, borderRadius: TOKENS.radiusSm, cursor: "pointer",
                  border: `2px solid ${icon === k ? TOKENS.lineStrong : TOKENS.line}`,
                  background: icon === k ? TOKENS.yellow : "#fff",
                }}
              >
                <Icon size={18} />
              </button>
            );
          })}
        </div>
      </Field>
      <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
        <BigButton onClick={onClose} bg="#fff" color={TOKENS.ink} style={{ boxShadow: "none" }}>{t.cancel}</BigButton>
        <BigButton onClick={() => name.trim() && onSave({ name: name.trim(), icon })} bg={TOKENS.yellow} color={TOKENS.yellowInk}>
          {t.save}
        </BigButton>
      </div>
    </Modal>
  );
}

/* ============================================================================
   CATEGORY SCREEN
   ============================================================================ */
function CategoryScreen({ t, lang, category, items, onOpenItem, onAddItem }) {
  const [query, setQuery] = useState("");
  const Icon = ICON_MAP[category.icon] || Package;
  const filtered = items.filter((i) => i.name.toLowerCase().includes(query.toLowerCase()));
  const sorted = [...filtered].sort((a, b) => (b.favorite ? 1 : 0) - (a.favorite ? 1 : 0));

  return (
    <div style={{ padding: 14 }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
        <div style={{ background: TOKENS.yellow, borderRadius: 10, padding: 8, border: `2px solid ${TOKENS.lineStrong}` }}>
          <Icon size={20} />
        </div>
        <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: 24 }}>
          {category.name[lang] || category.name.he}
        </div>
      </div>

      <div style={{ position: "relative", marginBottom: 14 }}>
        <Search size={18} style={{ position: "absolute", insetInlineStart: 12, top: 13, color: TOKENS.inkSoft }} />
        <input
          style={{ ...inputStyle, paddingInlineStart: 38 }}
          placeholder={t.search_placeholder}
          value={query}
          onChange={(e) => setQuery(e.target.value)}
        />
      </div>

      {sorted.length === 0 ? (
        <div style={{ textAlign: "center", color: TOKENS.inkSoft, padding: "30px 10px" }}>{t.category_empty}</div>
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12, marginBottom: 14 }}>
          {sorted.map((it) => {
            const low = it.lowStockThreshold > 0 && it.stock.found <= it.lowStockThreshold;
            return (
              <button
                key={it.id}
                onClick={() => onOpenItem(it)}
                style={{
                  display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 8, textAlign: "start",
                  padding: 14, borderRadius: TOKENS.radius, border: `2px solid ${TOKENS.lineStrong}`,
                  background: "#fff", cursor: "pointer", boxShadow: "0 3px 0 rgba(20,24,28,0.9)", position: "relative",
                }}
              >
                {it.favorite && <Star size={16} fill={TOKENS.yellow} color={TOKENS.yellow} style={{ position: "absolute", insetInlineEnd: 10, top: 10 }} />}
                <div style={{ fontWeight: 700, fontSize: 15, paddingInlineEnd: 18 }}>{it.name}</div>
                <div style={{
                  fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, fontSize: 20,
                  background: TOKENS.gaugeBg, color: low ? "#FF9E80" : TOKENS.gaugeText,
                  borderRadius: TOKENS.radiusSm, padding: "4px 10px", alignSelf: "stretch", textAlign: "center",
                }}>
                  {it.stock.found}
                </div>
                {low && (
                  <div style={{ display: "flex", alignItems: "center", gap: 4, color: TOKENS.repair, fontSize: 11, fontWeight: 700 }}>
                    <AlertTriangle size={12} /> {t.item_lowStock}
                  </div>
                )}
              </button>
            );
          })}
        </div>
      )}

      <BigButton onClick={onAddItem} bg="#fff" color={TOKENS.ink} style={{ boxShadow: "none", border: `2px dashed ${TOKENS.inkSoft}` }}>
        <Plus size={20} /> {t.category_addItem}
      </BigButton>
    </div>
  );
}

/* ============================================================================
   ADD ITEM MODAL
   ============================================================================ */
function AddItemModal({ t, onClose, onSave }) {
  const [name, setName] = useState("");
  const [threshold, setThreshold] = useState("");
  return (
    <Modal title={t.addItem_title} onClose={onClose}>
      <Field label={t.addItem_name} required>
        <input style={inputStyle} value={name} onChange={(e) => setName(e.target.value)} />
      </Field>
      <Field label={t.addItem_threshold}>
        <input style={inputStyle} type="number" min="0" value={threshold} onChange={(e) => setThreshold(e.target.value)} />
      </Field>
      <div style={{ display: "flex", gap: 10, marginTop: 16 }}>
        <BigButton onClick={onClose} bg="#fff" color={TOKENS.ink} style={{ boxShadow: "none" }}>{t.cancel}</BigButton>
        <BigButton
          onClick={() => name.trim() && onSave({ name: name.trim(), threshold: Number(threshold) || 0 })}
          bg={TOKENS.yellow} color={TOKENS.yellowInk}
        >
          {t.save}
        </BigButton>
      </div>
    </Modal>
  );
}

/* ============================================================================
   ITEM SCREEN
   ============================================================================ */
function ItemScreen({ t, lang, item, profile, onUpdateItem, onDeleteItem, appendHistory, appendActivity, storageGet }) {
  const [actionType, setActionType] = useState(null); // taken|returned|repair|received
  const [orderMode, setOrderMode] = useState(null); // 'order' | 'framework'
  const [history, setHistory] = useState([]);
  const [historyOpen, setHistoryOpen] = useState(false);

  useEffect(() => {
    if (!historyOpen || !profile?.projectId) return;
    (async () => {
      const h = await storageGet(`history:${profile.projectId}:${item.id}`, true);
      setHistory(h || []);
    })();
  }, [historyOpen, profile, item.id, storageGet]);

  const toggleFavorite = () => onUpdateItem({ ...item, favorite: !item.favorite });

  const applyAction = async ({ type, qty, date, reporter, photo, barcode, note }) => {
    const stock = { repair: 0, ...item.stock };
    if (type === "taken") stock.found = Math.max(0, stock.found - qty);
    if (type === "returned") stock.found = stock.found + qty;
    if (type === "repair") {
      stock.found = Math.max(0, stock.found - qty);
      stock.repair = stock.repair + qty;
    }
    if (type === "repairReturn") {
      stock.repair = Math.max(0, stock.repair - qty);
      stock.found = stock.found + qty;
    }
    if (type === "received") {
      stock.ordered = Math.max(0, stock.ordered - qty);
      stock.found = stock.found + qty;
    }
    onUpdateItem({ ...item, stock });
    await appendHistory(item.id, { type, qty, date, reporter, photo, barcode, note });
    await appendActivity({ type, qty, date, reporter });
    setActionType(null);
  };

  const applyOrder = async ({ mode, qty, orderDate, orderNumber, supplier, supplierPhone, eta }) => {
    const stock = { ...item.stock };
    if (mode === "framework") {
      const take = Math.min(qty, stock.framework);
      stock.framework = Math.max(0, stock.framework - take);
      stock.ordered = stock.ordered + take;
    } else {
      stock.ordered = stock.ordered + qty;
    }
    onUpdateItem({ ...item, stock });
    const entry = {
      type: mode === "framework" ? "frameworkOrder" : "order",
      qty, date: new Date().toISOString(), reporter: profile?.username,
      orderDetails: { orderDate, orderNumber, supplier, supplierPhone, eta },
    };
    await appendHistory(item.id, entry);
    await appendActivity({ type: entry.type, qty, date: entry.date, reporter: profile?.username });
    setOrderMode(null);
  };

  return (
    <div style={{ padding: 14 }}>
      <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", marginBottom: 16 }}>
        <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: 26, lineHeight: 1.1 }}>{item.name}</div>
        <div style={{ display: "flex", gap: 8 }}>
          <IconBtn onClick={toggleFavorite} title={t.item_favorite} style={{ background: item.favorite ? TOKENS.yellow : "#fff" }}>
            <Star size={18} fill={item.favorite ? TOKENS.ink : "none"} />
          </IconBtn>
          <IconBtn onClick={onDeleteItem} title={t.delete}><Trash2 size={18} /></IconBtn>
        </div>
      </div>

      {/* Stock gauges */}
      <div style={{
        background: TOKENS.gaugeBg, borderRadius: TOKENS.radius, padding: 18,
        border: `2px solid ${TOKENS.lineStrong}`, marginBottom: 16,
      }}>
        <div style={{ textAlign: "center", marginBottom: 10 }}>
          <div style={{ color: "#8FA0AB", fontSize: 13, fontWeight: 700, letterSpacing: 1 }}>{t.item_found.toUpperCase()}</div>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, fontSize: 52, color: TOKENS.gaugeText, lineHeight: 1.1 }}>
            {item.stock.found}
          </div>
        </div>
        <div style={{ display: "flex", gap: 10 }}>
          <div style={{ flex: 1, textAlign: "center", background: "rgba(255,255,255,0.06)", borderRadius: TOKENS.radiusSm, padding: "8px 4px" }}>
            <div style={{ color: "#8FA0AB", fontSize: 11, fontWeight: 700 }}>{t.item_ordered}</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, fontSize: 20, color: "#FFD98F" }}>{item.stock.ordered}</div>
          </div>
          <div style={{ flex: 1, textAlign: "center", background: "rgba(255,255,255,0.06)", borderRadius: TOKENS.radiusSm, padding: "8px 4px" }}>
            <div style={{ color: "#8FA0AB", fontSize: 11, fontWeight: 700 }}>{t.item_framework}</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, fontSize: 20, color: "#9FCBFF" }}>{item.stock.framework}</div>
          </div>
          <div style={{ flex: 1, textAlign: "center", background: "rgba(255,255,255,0.06)", borderRadius: TOKENS.radiusSm, padding: "8px 4px" }}>
            <div style={{ color: "#8FA0AB", fontSize: 11, fontWeight: 700 }}>{t.item_inRepair}</div>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, fontSize: 20, color: "#FFB08A" }}>{item.stock.repair || 0}</div>
          </div>
        </div>
        {item.lowStockThreshold > 0 && item.stock.found <= item.lowStockThreshold && (
          <div style={{ display: "flex", alignItems: "center", gap: 6, color: "#FF9E80", fontSize: 12, fontWeight: 700, marginTop: 10, justifyContent: "center" }}>
            <AlertTriangle size={14} /> {t.item_lowStock}
          </div>
        )}
      </div>

      {/* Order buttons */}
      <div style={{ display: "flex", gap: 10, marginBottom: 10 }}>
        <BigButton onClick={() => setOrderMode("order")} bg={TOKENS.blue}><ClipboardList size={18} /> {t.item_order}</BigButton>
        <BigButton onClick={() => setOrderMode("framework")} bg="#fff" color={TOKENS.blue} style={{ borderColor: TOKENS.blue }}>
          <ArrowRightLeft size={18} /> {t.item_frameworkOrder}
        </BigButton>
      </div>
      {(item.stock.ordered > 0 || (item.stock.repair || 0) > 0) && (
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 16 }}>
          {item.stock.ordered > 0 && (
            <BigButton onClick={() => setActionType("received")} bg="#fff" color={TOKENS.returned} style={{ borderColor: TOKENS.returned }}>
              <Check size={18} /> {t.item_received}
            </BigButton>
          )}
          {(item.stock.repair || 0) > 0 && (
            <BigButton onClick={() => setActionType("repairReturn")} bg="#fff" color={TOKENS.repair} style={{ borderColor: TOKENS.repair }}>
              <Wrench size={18} /> {t.item_returnFromRepair}
            </BigButton>
          )}
        </div>
      )}

      {/* Action buttons */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 10, marginBottom: 18 }}>
        <BigButton onClick={() => setActionType("taken")} bg={TOKENS.taken} style={{ fontSize: 16 }}>{t.item_taken}</BigButton>
        <BigButton onClick={() => setActionType("returned")} bg={TOKENS.returned} style={{ fontSize: 16 }}>{t.item_returned}</BigButton>
        <BigButton onClick={() => setActionType("repair")} bg={TOKENS.repair} style={{ fontSize: 16 }}>{t.item_repair}</BigButton>
      </div>

      <button
        onClick={() => setHistoryOpen((v) => !v)}
        style={{ display: "flex", alignItems: "center", gap: 8, background: "transparent", border: "none", cursor: "pointer", fontWeight: 700, color: TOKENS.inkSoft, padding: 0, marginBottom: 10 }}
      >
        <History size={18} /> {t.item_history}
        <ChevronDown size={16} style={{ transform: historyOpen ? "rotate(180deg)" : "none", transition: "transform .15s" }} />
      </button>

      {historyOpen && (
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {history.length === 0 ? (
            <div style={{ color: TOKENS.inkSoft, fontSize: 13 }}>{t.item_noHistory}</div>
          ) : (
            history.map((h) => <HistoryRow key={h.id} h={h} t={t} lang={lang} />)
          )}
        </div>
      )}

      {actionType && (
        <ActionModal
          t={t}
          type={actionType}
          profile={profile}
          onClose={() => setActionType(null)}
          onConfirm={(payload) => applyAction({ type: actionType, ...payload })}
        />
      )}

      {orderMode && (
        <OrderModal
          t={t}
          mode={orderMode}
          maxFramework={item.stock.framework}
          onClose={() => setOrderMode(null)}
          onConfirm={(payload) => applyOrder({ mode: orderMode, ...payload })}
        />
      )}
    </div>
  );
}

const typeColor = {
  taken: TOKENS.taken, returned: TOKENS.returned, repair: TOKENS.repair,
  repairReturn: TOKENS.repair, received: TOKENS.returned, order: TOKENS.blue, frameworkOrder: TOKENS.blue,
};

function HistoryRow({ h, t, lang }) {
  const d = new Date(h.date);
  return (
    <div style={{ display: "flex", gap: 10, padding: 10, background: "#fff", borderRadius: TOKENS.radiusSm, border: `1px solid ${TOKENS.line}` }}>
      {h.photo ? (
        <img src={h.photo} alt="" style={{ width: 48, height: 48, objectFit: "cover", borderRadius: 6, flexShrink: 0 }} />
      ) : (
        <div style={{ width: 48, height: 48, borderRadius: 6, background: "#F0F1F2", flexShrink: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
          <FileText size={18} color={TOKENS.inkSoft} />
        </div>
      )}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
          <span style={{
            fontSize: 11, fontWeight: 800, color: "#fff", background: typeColor[h.type] || TOKENS.inkSoft,
            borderRadius: 4, padding: "2px 7px",
          }}>
            {t[`type_${h.type}`] || h.type}
          </span>
          {h.qty ? <span style={{ fontSize: 12, fontWeight: 700, color: TOKENS.inkSoft }}>× {h.qty}</span> : null}
        </div>
        <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 3 }}>
          {d.toLocaleString(lang === "he" ? "he-IL" : "en-US")} · {h.reporter}
        </div>
        {h.note && <div style={{ fontSize: 12, marginTop: 3 }}>{h.note}</div>}
        {h.orderDetails?.supplier && (
          <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 3 }}>{h.orderDetails.supplier} · {h.orderDetails.orderNumber}</div>
        )}
      </div>
    </div>
  );
}

/* ============================================================================
   ACTION (DOCUMENTATION) MODAL
   ============================================================================ */
function ActionModal({ t, type, profile, onClose, onConfirm }) {
  const [qty, setQty] = useState(1);
  const [photo, setPhoto] = useState(null);
  const [barcode, setBarcode] = useState("");
  const [note, setNote] = useState("");
  const [error, setError] = useState("");
  const now = new Date();

  const titleKey = `doc_title_${type}`;
  const color = typeColor[type];

  const confirm = () => {
    if (!photo) {
      setError(t.doc_photoRequired);
      return;
    }
    onConfirm({ qty, date: now.toISOString(), reporter: profile?.username, photo, barcode, note });
  };

  return (
    <Modal title={t[titleKey]} onClose={onClose}>
      <div style={{ height: 4, background: color, borderRadius: 4, marginBottom: 16, marginTop: -6 }} />
      <Field label={t.doc_qty}>
        <Stepper value={qty} onChange={setQty} min={1} />
      </Field>
      <Field label={t.doc_date}>
        <div style={{ ...inputStyle, background: "#F5F6F7" }}>{now.toLocaleString()}</div>
      </Field>
      <Field label={t.doc_reporter}>
        <div style={{ ...inputStyle, background: "#F5F6F7" }}>{profile?.username}</div>
      </Field>
      <Field label={t.doc_photo} required>
        <PhotoCapture photo={photo} setPhoto={(p) => { setPhoto(p); setError(""); }} t={t} />
      </Field>
      <Field label={t.doc_barcode}>
        <div style={{ display: "flex", gap: 8 }}>
          <ScanLine size={20} style={{ marginTop: 12, color: TOKENS.inkSoft }} />
          <input style={inputStyle} placeholder={t.doc_barcode_placeholder} value={barcode} onChange={(e) => setBarcode(e.target.value)} />
        </div>
      </Field>
      <Field label={t.doc_note}>
        <textarea style={{ ...inputStyle, minHeight: 70, resize: "vertical" }} value={note} onChange={(e) => setNote(e.target.value)} />
      </Field>
      {error && <div style={{ color: TOKENS.taken, fontWeight: 600, fontSize: 13, marginBottom: 10 }}>{error}</div>}
      <BigButton onClick={confirm} bg={color}>{t.doc_confirm}</BigButton>
    </Modal>
  );
}

/* ============================================================================
   ORDER MODAL (regular + framework)
   ============================================================================ */
function OrderModal({ t, mode, maxFramework, onClose, onConfirm }) {
  const [qty, setQty] = useState(1);
  const [orderDate, setOrderDate] = useState(new Date().toISOString().slice(0, 10));
  const [orderNumber, setOrderNumber] = useState("");
  const [supplier, setSupplier] = useState("");
  const [supplierPhone, setSupplierPhone] = useState("");
  const [eta, setEta] = useState("");
  const [error, setError] = useState("");

  const confirm = () => {
    if (mode === "framework" && qty > maxFramework) {
      setError(t.order_notEnoughFramework);
      return;
    }
    onConfirm({ qty, orderDate, orderNumber, supplier, supplierPhone, eta });
  };

  return (
    <Modal title={mode === "framework" ? t.order_frameworkTitle : t.order_title} onClose={onClose}>
      <Field label={t.order_qty}>
        <Stepper value={qty} onChange={setQty} min={1} />
        {mode === "framework" && (
          <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 6 }}>{t.item_framework}: {maxFramework}</div>
        )}
      </Field>
      <Field label={t.order_date}>
        <input type="date" style={inputStyle} value={orderDate} onChange={(e) => setOrderDate(e.target.value)} />
      </Field>
      <Field label={t.order_number}>
        <input style={inputStyle} value={orderNumber} onChange={(e) => setOrderNumber(e.target.value)} />
      </Field>
      <Field label={t.order_supplier}>
        <input style={inputStyle} value={supplier} onChange={(e) => setSupplier(e.target.value)} />
      </Field>
      <Field label={t.order_supplierPhone}>
        <input type="tel" style={inputStyle} value={supplierPhone} onChange={(e) => setSupplierPhone(e.target.value)} />
      </Field>
      <Field label={t.order_eta}>
        <input type="date" style={inputStyle} value={eta} onChange={(e) => setEta(e.target.value)} />
      </Field>
      {error && <div style={{ color: TOKENS.taken, fontWeight: 600, fontSize: 13, marginBottom: 10 }}>{error}</div>}
      <BigButton onClick={confirm} bg={TOKENS.blue}>{t.save}</BigButton>
    </Modal>
  );
}

/* ============================================================================
   CALENDAR SCREEN
   ============================================================================ */
function CalendarScreen({ t, lang, profile, storageGet }) {
  const [activity, setActivity] = useState([]);
  const [selectedDate, setSelectedDate] = useState(new Date().toISOString().slice(0, 10));

  useEffect(() => {
    (async () => {
      if (!profile?.projectId) return;
      const a = await storageGet(`activity:${profile.projectId}`, true);
      setActivity(a || []);
    })();
  }, [profile, storageGet]);

  const dayEntries = activity.filter((a) => a.date && a.date.slice(0, 10) === selectedDate);
  const markedDates = new Set(activity.map((a) => a.date && a.date.slice(0, 10)));

  return (
    <div style={{ padding: 14 }}>
      <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: 24, marginBottom: 14 }}>{t.calendar_title}</div>
      <input
        type="date"
        style={{ ...inputStyle, marginBottom: 16 }}
        value={selectedDate}
        onChange={(e) => setSelectedDate(e.target.value)}
      />
      {dayEntries.length === 0 ? (
        <div style={{ color: TOKENS.inkSoft, textAlign: "center", padding: "20px 0" }}>{t.calendar_noActivity}</div>
      ) : (
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {dayEntries.map((a) => (
            <div key={a.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: 10, background: "#fff", borderRadius: TOKENS.radiusSm, border: `1px solid ${TOKENS.line}` }}>
              <span style={{ fontSize: 11, fontWeight: 800, color: "#fff", background: typeColor[a.type] || TOKENS.inkSoft, borderRadius: 4, padding: "2px 7px" }}>
                {t[`type_${a.type}`] || a.type}
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ fontWeight: 700, fontSize: 14 }}>{a.itemName}</div>
                <div style={{ fontSize: 12, color: TOKENS.inkSoft }}>{a.categoryName} · {a.reporter} · {new Date(a.date).toLocaleTimeString(lang === "he" ? "he-IL" : "en-US")}</div>
              </div>
              {a.qty ? <div style={{ fontWeight: 700, color: TOKENS.inkSoft }}>×{a.qty}</div> : null}
            </div>
          ))}
        </div>
      )}
      <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 16, display: "flex", alignItems: "center", gap: 6 }}>
        <Info size={14} /> {markedDates.size} {lang === "he" ? "ימים עם פעילות בסה\"כ" : "days with logged activity in total"}
      </div>
    </div>
  );
}

/* ============================================================================
   SUMMARY SCREEN
   ============================================================================ */
function SummaryScreen({ t, lang, categories, profile, storageGet }) {
  const [selected, setSelected] = useState(new Set(categories.map((c) => c.id)));
  const [itemsByCat, setItemsByCat] = useState({});

  useEffect(() => {
    (async () => {
      if (!profile?.projectId) return;
      const entries = await Promise.all(
        categories.map(async (c) => [c.id, (await storageGet(`items:${profile.projectId}:${c.id}`, true)) || []])
      );
      setItemsByCat(Object.fromEntries(entries));
    })();
  }, [categories, profile, storageGet]);

  const toggle = (id) => {
    const next = new Set(selected);
    next.has(id) ? next.delete(id) : next.add(id);
    setSelected(next);
  };

  const visibleCats = categories.filter((c) => selected.has(c.id));

  return (
    <div style={{ padding: 14 }}>
      <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: 24, marginBottom: 10 }}>{t.summary_title}</div>
      <div style={{ fontSize: 13, fontWeight: 700, color: TOKENS.inkSoft, marginBottom: 8 }}>{t.summary_chooseCategories}</div>
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginBottom: 18 }}>
        {categories.map((c) => (
          <button
            key={c.id}
            onClick={() => toggle(c.id)}
            style={{
              padding: "7px 12px", borderRadius: 999, border: `2px solid ${TOKENS.lineStrong}`,
              background: selected.has(c.id) ? TOKENS.yellow : "#fff", fontWeight: 700, fontSize: 13, cursor: "pointer",
            }}
          >
            {c.name[lang] || c.name.he}
          </button>
        ))}
      </div>

      {visibleCats.every((c) => (itemsByCat[c.id] || []).length === 0) && (
        <div style={{ color: TOKENS.inkSoft, textAlign: "center", padding: "20px 0" }}>{t.summary_noItems}</div>
      )}

      {visibleCats.map((c) => {
        const its = itemsByCat[c.id] || [];
        if (its.length === 0) return null;
        return (
          <div key={c.id} style={{ marginBottom: 18 }}>
            <div style={{ fontWeight: 800, fontFamily: "'Barlow Condensed', sans-serif", fontSize: 17, marginBottom: 8 }}>{c.name[lang] || c.name.he}</div>
            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              {its.map((it) => {
                const low = it.lowStockThreshold > 0 && it.stock.found <= it.lowStockThreshold;
                return (
                  <div key={it.id} style={{ display: "flex", alignItems: "center", gap: 10, background: "#fff", borderRadius: TOKENS.radiusSm, border: `1px solid ${TOKENS.line}`, padding: "8px 10px" }}>
                    <div style={{ flex: 1, fontWeight: 600, fontSize: 14 }}>{it.name}{low && <AlertTriangle size={12} color={TOKENS.repair} style={{ marginInlineStart: 6 }} />}</div>
                    <MiniStat label={t.item_found} val={it.stock.found} color={TOKENS.gaugeText} dark />
                    <MiniStat label={t.item_ordered} val={it.stock.ordered} color={TOKENS.blue} />
                    <MiniStat label={t.item_framework} val={it.stock.framework} color={TOKENS.blue} />
                    <MiniStat label={t.item_inRepair} val={it.stock.repair || 0} color={TOKENS.repair} />
                  </div>
                );
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
}
function MiniStat({ label, val, color, dark }) {
  return (
    <div style={{ textAlign: "center", minWidth: 44 }}>
      <div style={{ fontSize: 9, fontWeight: 700, color: TOKENS.inkSoft }}>{label}</div>
      <div style={{
        fontFamily: "'JetBrains Mono', monospace", fontWeight: 700, fontSize: 14,
        color: dark ? TOKENS.gaugeText : color, background: dark ? TOKENS.gaugeBg : "transparent",
        borderRadius: 4, padding: dark ? "1px 6px" : 0,
      }}>{val}</div>
    </div>
  );
}

/* ============================================================================
   SETTINGS SCREEN
   ============================================================================ */
function SettingsScreen({ t, lang, setLang, profile, project, onLogout }) {
  return (
    <div style={{ padding: 14 }}>
      <div style={{ fontFamily: "'Barlow Condensed', sans-serif", fontWeight: 800, fontSize: 24, marginBottom: 18 }}>{t.settings_title}</div>

      <div style={{ marginBottom: 20 }}>
        <div style={{ fontSize: 13, fontWeight: 700, color: TOKENS.inkSoft, marginBottom: 8 }}>{t.settings_language}</div>
        <div style={{ display: "flex", gap: 8 }}>
          {["he", "en"].map((l) => (
            <button
              key={l}
              onClick={() => setLang(l)}
              style={{
                flex: 1, padding: "10px 8px", borderRadius: TOKENS.radiusSm, border: `2px solid ${TOKENS.lineStrong}`,
                background: lang === l ? TOKENS.yellow : "#fff", fontWeight: 700, cursor: "pointer",
              }}
            >
              {l === "he" ? "עברית" : "English"}
            </button>
          ))}
        </div>
        <div style={{ fontSize: 12, color: TOKENS.inkSoft, marginTop: 8, display: "flex", gap: 6, alignItems: "flex-start" }}>
          <Globe size={14} style={{ marginTop: 1, flexShrink: 0 }} /> {t.settings_addLanguageNote}
        </div>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 24 }}>
        <Row icon={<UserIcon size={18} />} label={`${t.settings_user}: ${profile?.username} (${profile?.role})`} />
        <Row icon={<Building2 size={18} />} label={`${t.settings_site}: ${project?.name || "—"}`} />
      </div>

      <BigButton onClick={onLogout} bg="#fff" color={TOKENS.taken} style={{ borderColor: TOKENS.taken, boxShadow: "none" }}>
        <LogOut size={18} /> {t.settings_logout}
      </BigButton>
    </div>
  );
}